import { $, component$ } from "@builder.io/qwik";
import Button from "../Button";
import Space from "../Space";
import Divider from "../Divider";


const SpaceDemo = component$(() => {
    const onClick = $(() => {
        console.log(18, '测试按钮')
    })

    return <div class="flex-1 overflow-auto p-10">
        <Space block size={40} direction="vertical">
            <Space block size="large">
                align:start
                <Space align="start">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
                <Divider type="vertical" margin={10} size={150} orientation="center">
                    center
                </Divider>
                <Space direction="vertical" align="start">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
            </Space>
            <Divider dashed lineWidth={3} color="#f00" margin={5} orientation="center" >
                text
            </Divider>
            <Space block size="large">
                align:center
                <Space align="center">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
                <Divider type="vertical" size={150} />
                <Space direction="vertical" align="center">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
            </Space>
            <Divider lineWidth={2} color="#f00" orientation="left" orientationMargin={100}>left</Divider>
            <Space block size="large">
                align:end
                <Space align="end">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
                <Divider type="vertical" size={150} dashed />
                <Space direction="vertical" align="end">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
            </Space>
            <Divider lineWidth={1} color="#0f0" orientation="right" orientationMargin={0}>right</Divider>
            <Space block size="large">
                align:baseline
                <Space align="baseline">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
                <Divider type="vertical" size={150} />
                <Space direction="vertical" align="baseline">
                    <Button shape="default" size="small" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="round" size="middle" type="primary" onClick={onClick}>点击</Button>
                    <Button shape="circle" size="large" type="primary" onClick={onClick}>点</Button>
                </Space>
            </Space>
            <Divider />
        </Space>
        <Divider />
    </div>
})

export default SpaceDemo;